<template>
    <el-container class="my_container">
        <el-aside width="auto" style="background-color:#424242 " id="aside" class="reportMianShow">
            <el-menu default-active="1-4-1"
                     background-color="#424242"
                     text-color="#ffffff"
                     @select="menuSelect"
                     class="el-menu-vertical-demo" :collapse="isCollapse">
                <el-submenu index="01">
                    <template slot="title">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">鸿业管理系统</span>
                    </template>
                    <el-menu-item-group style="line-height: 40px">
                        <el-menu-item index="0-项目核算主页-/ExpenditureIndex">项目核算主页</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu v-for="item in menulist" :index="item.Id+''">
                    <template slot="title">
                        <i :class="item.ico" style="font-size: 20px;padding-right:5px"></i>
                        <span slot="title">{{ item.name }}</span>
                    </template>
                    <el-menu-item-group v-for="ite in item.children" style="line-height: 40px">
                        <el-menu-item :index="ite.Id+'-'+ite.name+'-'+ite.url">{{ ite.name }}</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="border-bottom: 1px solid #d8ffff;height: 40px" class="elheader reportMianShow">
                <el-button style="background-color: transparent; border:0px;font-size: 23px;padding: 8px 15px;"
                           icon="el-icon-s-unfold" @click="isCollapse = isCollapse == true?false:true"></el-button>
                <div class="elheadertwo">
                    <el-badge :value.sync="messagecount" :max="99">
                        <el-button icon="el-icon-bell"
                                   style="padding: 0px;background-color: transparent;font-size: 20px;"
                                   @click="Message_event"></el-button>
                    </el-badge>
                    <el-avatar src="/image/logo.png"
                               style="height: 25px;width: 25px;margin: 2px 5px 0px 40px;position: relative;top: 5px;"></el-avatar>
                    <el-dropdown @command="Command_event" style="position: relative;top: -2px;">
                        <span class="el-dropdown-link">
                            {{ $store.state.user.name }}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="userinfo">个人信息</el-dropdown-item>
                            <el-dropdown-item command="updatepassword">修改密码</el-dropdown-item>
                            <el-dropdown-item command="loginout">安全退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>
            <el-main>
                <div v-show="contextMenu.show">
                    <div style=" position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0);z-index: 99"
                         @click="ContextMenuOff()"></div>
                    <ul :style="{left:contextMenu.left+'px',top:contextMenu.top+'px'}" class="contextmenu">
                        <li>
                            <el-button type="text" @click="contextMenuClick('reload')" size="mini">重新加载</el-button>
                        </li>
                        <li>
                            <el-button type="text" @click="contextMenuClick('all')" size="mini">关闭所有</el-button>
                        </li>
                        <li>
                            <el-button type="text" @click="contextMenuClick('left')" size="mini">关闭左边</el-button>
                        </li>
                        <li>
                            <el-button type="text" @click="contextMenuClick('right')" size="mini">关闭右边</el-button>
                        </li>
                        <li>
                            <el-button type="text" @click="contextMenuClick('other')" size="mini">关闭其他</el-button>
                        </li>
                    </ul>
                </div>
                <el-tabs type="card" v-model="tableTabs" closable @tab-remove="removeTab" @tab-click="clickTab" style="height:100%">
                    <el-tab-pane v-for="(item,index) in tabslis"
                                 :key="item.name"
                                 :label="item.title"
                                 :name="item.name">
                        <span slot="label" @contextmenu.prevent="openContextMenu(item,index)">{{item.title}}</span>
                        <iframe :src="mainurl + item.content" class="iframebox" :id="'iframe_' + item.name"></iframe>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
        <el-dialog title="修改密码" width="30%" :visible.sync="updatapassword.dialog">
            <el-form :model="updatapassword.data" label-width="80px">
                <el-form-item label="旧密码">
                    <el-input v-model="updatapassword.data.oldpassword" show-password></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input v-model="updatapassword.data.newpassword" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input v-model="updatapassword.data.newpassword_" show-password></el-input>
                </el-form-item>
                <el-form-item align="center" label-width="0px">
                    <el-button type="warning" @click="updatapassword_event">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="个人信息" width="80%" :visible.sync="userinfo.dialog">
            <el-form :model="userinfo.details" label-width="100px" disabled>
                <el-row>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="姓名">
                            <el-input v-model="userinfo.details.UserName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="性别">
                            <el-radio-group v-model="userinfo.details.Sex">
                                <el-radio :label="0">男</el-radio>
                                <el-radio :label="1">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="出生日期">
                            <el-input v-model="userinfo.details.Birth"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="工号">
                            <el-input v-model="userinfo.details.JobNumber"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="身份证号">
                            <el-input v-model="userinfo.details.Card"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="联系电话">
                            <el-input v-model="userinfo.details.Phone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="家庭地址">
                            <el-input v-model="userinfo.details.FamilyAddress"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="所属部门">
                            <el-select v-model="userinfo.details.DepartmentId" style="width: 100%" filterable>
                                <el-option v-for="v in AllDepartment" :value="v.Id"
                                           :label="v.DepartmentName"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="职务">
                            <el-select v-model="userinfo.details.UserPosition" style="width: 100%" filterable>
                                <el-option v-for="v in AllPostion" :value="v.Id+''" :label="v.DutyName"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="在职状态">
                            <el-select v-model="userinfo.details.InternshipState" style="width: 100%" filterable>
                                <el-option :value="1" label="试用期"></el-option>
                                <el-option :value="2" label="实习期"></el-option>
                                <el-option :value="4" label="正式期"></el-option>
                                <el-option :value="16" label="兼职"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="入职日期">
                            <el-input v-model="userinfo.details.InductionTime"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="转正日期">
                            <el-input v-model="userinfo.details.RegularDate"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="合同开始日期">
                            <el-input v-model="userinfo.details.LabourDeadlineStart"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="合同结束日期">
                            <el-input v-model="userinfo.details.LabourDeadlineEnd"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="薪资标准">
                            <el-input v-model="userinfo.details.SalaryStandard"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="银行卡号">
                            <el-input v-model="userinfo.details.BankCardNumber"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="开户行">
                            <el-input v-model="userinfo.details.BankName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="邮箱">
                            <el-input v-model="userinfo.details.Email"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
        </el-dialog>
    </el-container>
</template>

<script>
    import * as publicjs from "../../public/Scriput/Public";  

    export default {
        name: "Main",
        data() {
            return {
                isCollapse: true,
                menulis: [
                    {
                        id: 1,
                        title: '物资管理',
                        url: '',
                        icor: 'el-icon-help',
                        children: [
                            {id: 2, title: '物资列表', icor: 'el-icon-help', url: '/MaterialList', children: []},
                            {id: 8, title: '入库单', icor: 'el-icon-help', url: '/InboundOrder', children: []},
                            {id: 9, title: '入库记录', icor: 'el-icon-help', url: '/InboundRecord', children: []},
                            {id: 10, title: '出库单', icor: 'el-icon-help', url: '/OutboundOrder', children: []},
                            {id: 11, title: '出库记录', icor: 'el-icon-help', url: '/OutboundRecord', children: []},
                            {id: 12, title: '归还单', icor: 'el-icon-help', url: '/ReturnOrder', children: []},
                            {id: 13, title: '归还记录', icor: 'el-icon-help', url: '/ReturnRecord', children: []},
                            {id: 14, title: '物资分类', icor: 'el-icon-help', url: '/DeviceCategory', children: []},
                            {id: 15, title: '维修物品', icor: 'el-icon-help', url: '/MainTenance', children: []},
                            {id: 16, title: '产品列表', icor: 'el-icon-help', url: '/IntangibleAssets', children: []},
                            {id: 17, title: '专利管理', icor: 'el-icon-help', url: '/IntangibleAssets', children: []},
                            {id: 18, title: '资质管理', icor: 'el-icon-help', url: '/Qualification', children: []},
                        ]
                    }, {
                        id: 20,
                        title: '财务管理',
                        url: '',
                        icor: 'el-icon-help',
                        children: [
                            {id: 23, title: '财务管理', icor: 'el-icon-help', url: '/Financemanagement', children: []},
                            {id: 24, title: '支付管理', icor: 'el-icon-help', url: '/FinanceLoan', children: []},
                            {id: 29, title: '报销管理', icor: 'el-icon-help', url: '/FinanceReimbursement', children: []},
                            {id: 27, title: '开票管理', icor: 'el-icon-help', url: '/FinanceInvoice', children: []},
                            {id: 28, title: '发票管理', icor: 'el-icon-help', url: '/FinanceInvoiceManage', children: []},
                            {id: 26, title: '收款管理', icor: 'el-icon-help', url: '/Finance', children: []},
                            {id: 25, title: '费用类别', icor: 'el-icon-help', url: '/FinanceCategory', children: []},

                        ]
                    }, {
                        id: 30,
                        title: '权限管理',
                        url: '',
                        icor: 'el-icon-help',
                        children: [
                            {id: 31, title: '审批规则', icor: 'el-icon-help', url: '/AuditRule', children: []},
                            {id: 32, title: '系统设置', icor: 'el-icon-help', url: '/SystemSetup', children: []},
                            {id: 33, title: 'Excel导入', icor: 'el-icon-help', url: '/ExcelAddInfo', children: []},
                            {id: 34, title: '角色权限', icor: 'el-icon-help', url: '/RightManage', children: []},
                            {id: 35, title: '模块管理', icor: 'el-icon-help', url: '/ModuleManage', children: []},
                        ]
                    },
                    {
                        id: 40,
                        title: '采购管理',
                        url: '',
                        icor: 'el-icon-help',
                        children: [
                            {id: 41, title: '申购列表', icor: 'el-icon-help', url: '/ApplyPurchase', children: []},
                            {id: 42, title: '采购管理', icor: 'el-icon-help', url: '/Purchase', children: []},
                        ]
                    },
                    {
                        id: 50,
                        title: '合同管理',
                        url: '',
                        icor: 'el-icon-help',
                        children: [
                            {id: 51, title: '合同列表', icor: 'el-icon-help', url: '/Contract', children: []},
                        ]
                    },
                    {
                        id: 60,
                        title: '客户关系',
                        url: '',
                        icor: 'el-icon-office-building',
                        children: [
                            {id: 61, title: '客户信息', icor: 'el-icon-help', url: '/Customer', children: []},
                        ]
                    },
                    {
                        id: 70,
                        title: '资料管理',
                        url: '',
                        icor: 'el-icon-document-copy',
                        children: [
                            {id: 71, title: '文档列表', icor: 'el-icon-help', url: '/Document', children: []},
                        ]
                    },
                    {
                        id: 80,
                        title: '其他管理',
                        url: '',
                        icor: 'el-icon-s-grid',
                        children: [
                            {id: 81, title: '消息管理', icor: 'el-icon-help', url: '/MessageTable', children: []},
                        ]
                    },
                    {
                        id: 90,
                        title: '人员管理',
                        url: '',
                        icor: 'el-icon-help',
                        children: [
                            {id: 91, title: '人员管理', icor: 'el-icon-help', url: '/UserInfo', children: []},
                            {id: 92, title: '组织机构', icor: 'el-icon-help', url: '/Department', children: []},
                            {id: 93, title: '职位管理', icor: 'el-icon-help', url: '/PosiTionMain', children: []},
                            {id: 94, title: '考勤管理', icor: 'el-icon-help', url: '/AttendanceDD', children: []},
                            {id: 95, title: '考勤设置', icor: 'el-icon-help', url: '/AttendanceSet', children: []},
                            {id: 96, title: '薪资构成', icor: 'el-icon-help', url: '/SalaryStructure', children: []},


                        ]
                    },
                    {
                        id: 100,
                        title: '报表管理',
                        url: '',
                        icor: 'el-icon-s-order',
                        children: [
                            {id: 101, title: '报表列表', icor: 'el-icon-help', url: '/ReportMian', children: []},
                        ]
                    }, {
                        id: 110,
                        title: '车辆管理',
                        url: '',
                        icor: 'el-icon-s-order',
                        children: [
                            {id: 111, title: '汽车列表', icor: 'el-icon-help', url: '/VehicleManagement', children: []},
                            {id: 112, title: '汽车消费台账', icor: 'el-icon-help', url: '/CarLedger', children: []},
                            {id: 113, title: '油卡管理', icor: 'el-icon-help', url: '/GasCardsRecord', children: []},
                            {id: 114, title: '私车公用', icor: 'el-icon-help', url: '/PrivateCarUtility', children: []},
                            {id: 115, title: '保养\保险\年检', icor: 'el-icon-help', url: '/Ticketrecord', children: []},
                            {id: 116, title: '使用记录', icor: 'el-icon-help', url: '/UsageRecord', children: []},
                        ]
                    },
                ],
                menulist: [
					{
					    children: [
							{
					            ico: "el-icon-tickets",
					            url: "/CompanyIndex",
					            name: "公司管理",
					            Id: 1001,
					        },
							{
							    ico: "el-icon-tickets",
							    url: "/SupplierIndex",
							    name: "合作方管理",
							    Id: 1002,
							}
					    ],
					    ico: "el-icon-s-management",
					    url: "",
					    name: "公司/合作方",
					    Id: 1, 
					},
					{
					    children: [
							{
					            ico: "el-icon-tickets",
					            url: "/BankinfoIndex",
					            name: "银行卡管理",
					            Id: 2001,
					        }
					    ],
					    ico: "el-icon-postcard",
					    url: "",
					    name: "银行卡",
					    Id: 2,
					}, 
					{
					    children: [
							{
					            ico: "el-icon-tickets",
					            url: "/ProjectIndex",
					            name: "项目管理",
					            Id: 3001,
					        }
					    ],
					    ico: "el-icon-s-order",
					    url: "",
					    name: "项目",
					    Id: 3,
					},
					{
					    children: [
							{
					            ico: "el-icon-tickets",
					            url: "/InvoiceIndex",
					            name: "开票管理",
					            Id: 4001,
					        }
					    ],
					    ico: "el-icon-s-marketing",
					    url: "",
					    name: "开票",
					    Id: 4,
					},
					{
					    children: [
							{
					            ico: "el-icon-tickets",
					            url: "/SetUpIndex",
					            name: "类别设置",
					            Id: 5001,
					        }
					    ],
					    ico: "el-icon-s-tools",
					    url: "",
					    name: "系统设置",
					    Id: 5,
					},
				],
                tableTabs: '0',
                tabslis: [{
                    title: '项目核算主页',
                    name: '0',
                    content: '/ExpenditureIndex'
                }],
                mainurl: '',
                updatapassword: {
                    data: {
                        oldpassword: '',
                        newpassword: '',
                        newpassword_: '',
                    },
                    dialog: false,
                },
                userinfo: {
                    dialog: false,
                    details: {},
                },
                AllProject: [],
                AllDepartment: [],
                AllDeviceState: [],
                AllDeviceCategory: [],
                AllPostion: [],
                messagecount: 0,
                test_dialog: false,
                contextMenu: {
                    show: false,
                    index: 0,
                    tab: {},
                    left: 0,
                    top: 0
                }
            }
        },
        created() {
            //console.log(JSON.stringify(this.menulis));

            this.mainurl = window.location.href.replace(this.$route.path, '')
            this.Init()
            window.addEventListener('message', e => {
                let regPos = /^\d+(\.\d+)?$/
                if (regPos.test(e.data)) {
                    this.messagecount = e.data
                }
            })
        },
        watch: {
            tableTabs: function (val, oldValue) {
                this.ReportMianShow();
            }
        },
        methods: {
            async initeum() {
                await this.$http.post('Home/GetInitMenuList').then(res => {
                    this.menulist = res.data.data;
                })
            },

            //初始数据加载
            async Init() {
                // await this.initeum();
                // this.AllDepartment = publicjs.GetAllDepartment(this.$http)
                // this.AllPostion = publicjs.GetAllDutyMains(this.$http)
            },
            //导航选项卡添加
            menuSelect(key) {
                let samething = true
                let keylis = key.split('-')
                this.tabslis.forEach(item => {
                    if (item.name == keylis[0]) {
                        samething = false
                        this.tableTabs = keylis[0]
                        return;
                    }
                })
                if (samething) {
                    // let url = window.location.href.replace(this.$route.path, keylis[2])
                    // let tabs_obj = { title: keylis[1], name: keylis[0], content: url }
                    let tabs_obj = {title: keylis[1], name: keylis[0], content: keylis[2]}
                    this.tabslis.push(tabs_obj)
                    this.tableTabs = keylis[0]
                }
            },
            //导航选项卡删除
            removeTab(targetName) {
                this.ReportMianShow();
                if (this.tabslis.length > 1) {
                    for (let i = 0; i < this.tabslis.length; i++) {
                        if (this.tabslis[i].name == targetName) {
                            this.tabslis.splice(i, 1)
                            this.tableTabs = this.tabslis[this.tabslis.length - 1].name
                            return;
                        }
                    }
                }
            },
			//获取选中的导航选项卡
			clickTab(value){
					const { name } = value || ''
					document.getElementById("iframe_" + name).contentWindow.location.reload();
			},
            // tabs右键事件
            openContextMenu(tab, index) {
                let client = window.event;
                var left = client.clientX + document.body.scrollLeft;//鼠标x位置
                var top = client.clientY + document.body.scrollTop;//鼠标y位置
                this.contextMenu = {
                    show: true,
                    index: index,
                    tab: tab,
                    left: left,
                    top: top
                }
                this.tableTabs = tab.name;
                this.ReportMianShow();
            },
            // 右键事件之后弹框内部事件
            contextMenuClick(key) {
                let tabslis = [], contextMenu = this.contextMenu;
                // 重新加载
                if (key === "reload") {
                    tabslis = this.tabslis;
                    document.getElementById("iframe_" + contextMenu.tab.name).contentWindow.location.reload();
                }
                // 关闭所有
                else if (key === "all") {
                    tabslis = [];
                }
                // 关闭左边
                else if (key === "left") {
                    for (let i = contextMenu.index; i < this.tabslis.length; i++) {
                        tabslis.push(this.tabslis[i]);
                    }
                }
                // 关闭右边
                else if (key === "right") {
                    for (let i = 0; i <= contextMenu.index; i++) {
                        tabslis.push(this.tabslis[i]);
                    }
                }
                // 关闭其他
                else if (key === "other") {
                    tabslis = [contextMenu.tab];
                }
                this.tableTabs = contextMenu.tab.name;
                this.tabslis = tabslis;
                this.ContextMenuOff();
            },
            // 关闭右键事件弹框
            ContextMenuOff() {
                this.contextMenu = {
                    show: false,
                    index: 0,
                    tab: {},
                    left: 0,
                    top: 0
                }
            },
            // 显示reportMianShow
            ReportMianShow() {
                let reportMianShow = window.parent.document.getElementsByClassName("reportMianShow");
                let isNone = false;
                for (let i = 0; i < reportMianShow.length; i++) {
                    if (reportMianShow[i].style.display === "none") {
                        isNone = true;
                        reportMianShow[i].style.display = "inline-block";
                    }
                }
                if (isNone) {
                    this.contextMenu.left += document.getElementById("aside").clientWidth;
                    this.contextMenu.top += 30;
                }
            },
            //下拉事件
            Command_event(command) {
                switch (command) {
                    case 'userinfo':
                        this.userinfo.dialog = true
                        this.boxuserinfo()
                        break;
                    case 'updatepassword':
                        this.updatapassword.dialog = true
                        break;
                    case 'loginout':
                        window.sessionStorage.setItem('token', '')
                        this.$router.push('/Login')
                        break;
                }
            },
            //修改密码
            updatapassword_event() {
                if (this.updatapassword.data.oldpassword == this.updatapassword.data.newpassword) {
                    this.$message.warning('旧密码与新密码不能相同')
                    return
                }
                if (this.updatapassword.data.newpassword_ != this.updatapassword.data.newpassword) {
                    this.$message.warning('两次密码不一致')
                    return;
                }
                this.$http.post('/api/Values/UpPassWord', {
                    OldPassword: this.updatapassword.data.oldpassword,
                    NewPassword: this.updatapassword.data.newpassword,
                    id: this.$store.state.user.id
                }).then(res => {
                    const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
                    if (StatusCode == 200) {
						this.$message.success(Message)
                        setTimeout(() => {
                            this.$router.push({ path: '/Login' })
                        }, 1500)
                    } else {
                        this.$message.warning(Message);
                        this.updatapassword.data.oldpassword="";
                        this.updatapassword.data.newpassword="";
                        this.updatapassword.data.newpassword_="";
                    } 
                } 
            )
            },
            //测试
            boxuserinfo() {
                this.$http.post('UserInfo/GetUsserInfoDetails', {
                    userid: this.$store.state.user.id
                }).then(res => {
                    this.userinfo.details = res.data
                })
            },
            //时间转化
            fmtDate(val) {
                if (val != null) {
                    let newtime = val.split(' ')
                    return newtime[0]
                }
            },
            //消息模块
            Message_event() {
                this.menuSelect('81-消息管理-/MessageTable')
                // let roleNumber = this.$store.state.user.roleNumber
                // let index = roleNumber.indexOf('Admin')
                // let index_ = roleNumber.indexOf('81')
                // if(index >= 0){
                //     this.menuSelect('81-消息管理-/MessageTable')
                // }
                // if (index_ >= 0){
                //     this.menuSelect('81-消息管理-/MessageTable')
                // }
            }
        }
    }
</script>

<style scoped>
    .my_container {
        height: 100%;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 250px;
        min-height: 400px;
    }

    .el-header {
        padding: 0px
    }

    .elheader {
        background: -webkit-linear-gradient(left, #fff8f8, #e2e2ff); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #fff8f8, #e2e2ff); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #fff8f8, #e2e2ff); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #fff8f8, #e2e2ff); /* 标准的语法 */
    }

    .el-main {
        padding: 0px 0px 0px 0px;
    }

    .el-tabs__content {
        height: 900px !important;
    }

    .el-tabs--border-card {
        border: 0px solid #DCDFE6;
        height: 100%;
    }

    .iframebox {
        height: 100%;
        width: 100%;
        /*background: #05a50a0d;*/
    }

    .el-tab-pane {
        height: 100%;
    }

    .el-tabs__header {
        margin: 0 0 0px !important;
    }

    .elheadertwo {
        display: inline-block;
        float: right;
        margin-right: 20px;
    }

    .el-menu-item, .el-submenu__title {
        height: 45px !important;
        line-height: 45px !important;
    }

    .el-button {
        border: 0px solid !important;
    }

    .el-menu {
        border-right: solid 0px #e6e6e6;
    }

    .contextmenu {
        width: 100px;
        margin: 0;
        border: 1px solid #ccc;
        background: #fff;
        z-index: 100;
        position: absolute;
        list-style-type: none;
        padding: 5px 0;
        border-radius: 4px;
        font-size: 14px;
        color: #333;
        box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
    }

    .contextmenu li {
        margin: 0;
        padding: 0px 22px;

    }

    .contextmenu li:hover {
        background: #f2f2f2;
        cursor: pointer;
    }

    .contextmenu li button {
        color: #2c3e50;
    }
</style>
